<template>
	<view>
		<view class="item">

			<view style="display: inline-flex; height: 80rpx; justify-content: space-between; margin: 0 20rpx;">
				<u-icon name="order" color="#1573FF" label="借调信息" labelColor="#333333">
				</u-icon>
			</view>

			<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>

			<view>
				<view class="text-line">
					<text class="text-name">借调类型:</text>
					<text class="text-value">{{detailInfo.secondmentType|secondmentType}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">调出门店:</text>
					<text class="text-value">{{detailInfo.bringStoreName|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">借调车辆:</text>
					<text class="text-value">{{detailInfo.carNo|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">调出时间:</text>
					<text class="text-value">{{detailInfo.bringTime|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">调入门店:</text>
					<text class="text-value">{{detailInfo.callStoreName|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">借调开始时间:</text>
					<text class="text-value">{{detailInfo.startTime|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">借调结束时间:</text>
					<text class="text-value">{{detailInfo.endTime|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">借调费用:</text>
					<text class="text-value">{{detailInfo.cost|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">费用是否已结算:</text>
					<text class="text-value">{{detailInfo.isPay|isPay}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">收车人:</text>
					<text class="text-value">{{detailInfo.collectPerson|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">备注:</text>
					<text class="text-value">{{detailInfo.remark|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">操作人:</text>
					<text class="text-value">{{detailInfo.userName|filterNull}}</text>
				</view>

				<view class="text-line">
					<text class="text-name">操作时间:</text>
					<text class="text-value">{{detailInfo.createTime|filterNull}}</text>
				</view>
			</view>

		</view>

		<view class="formInfo">
			<view style="display: inline-flex; height: 80rpx; justify-content: space-between;">
				<u-icon name="order" color="#1573FF" label="结束借调" labelColor="#333333">
				</u-icon>
			</view>
			<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>

			<u--form class="item" style="padding: 0 20rpx" ref="uform" label-width="auto">

				<u-form-item label="实际借调开始时间" @click="showSTime = true">
					<u--input v-model="actualStartTime" inputAlign="right" placeholder="请选择借调开始日期" border="none"
						disabled disabledColor="#ffffff">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="实际借调结束时间" @click="showETime = true">
					<u--input v-model="actualEndTime" inputAlign="right" placeholder="请选择借调结束日期" border="none" disabled
						disabledColor="#ffffff">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item v-if="detailInfo.secondmentType == 2" label="补充费用">
					<u--input v-model="addedCosts" inputAlign="right" placeholder="请输入费用" border="none">
					</u--input>
				</u-form-item>
			</u--form>
		</view>

		<view class="bottom">
			<text @click="commitInfo">结束借调</text>
		</view>

		<!-- 开始时间 -->
		<u-datetime-picker v-model="currentDate" ref="datetimePicker" closeOnClickOverlay :show="showSTime"
			@close="showSTime=false" @cancel="showSTime=false" :formatter="formatter" mode="datetime" title="开始时间"
			confirmColor="#1573FF" @confirm="confimSTime"></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker v-model="currentDate" ref="datetimePicker" closeOnClickOverlay :show="showETime"
			@close="showETime=false" @cancel="showETime=false" :formatter="formatter" mode="datetime" title="结束时间"
			confirmColor="#1573FF" @confirm="confimETime"></u-datetime-picker>

		<!-- 确认结束借调弹框 -->
		<u-modal title="提示" content="您确定结束借调吗?" :show="showFinish" showCancelButton @confirm="confirmFinish"
			@cancel="showFinish = false">
		</u-modal>
	</view>
</template>

<script>
	import {
		apiSecondmentCarDetail,
		apiOver
	} from '@/api/car-api.js'
	var moment = require('@/utils/moment.js');
	export default {
		data() {
			return {
				currentDate: moment(),
				showSTime: false,
				showETime: false,
				showFinish: false,
				carId: '',
				detailInfo: {},
				actualStartTime: '',
				actualEndTime: '',
				addedCosts: ''
			}
		},
		onLoad(op) {
			this.carId = op.carId;
			this.getData();
		},
		methods: {

			getData() {
				apiSecondmentCarDetail(this.carId).then(res => {
					this.detailInfo = res.data;
				})
			},
			confimSTime(e) {
				this.actualStartTime = moment(e.value).format('YYYY-MM-DD HH:mm:ss');
				this.showSTime = false;
			},
			confimETime(e) {
				this.actualEndTime = moment(e.value).format('YYYY-MM-DD HH:mm:ss');
				this.showETime = false;
			},
			commitInfo() {
				if (this.$u.test.isEmpty(this.actualStartTime)) {
					this.$u.toast('请选择实际借调开始时间');
					return
				} else if (this.$u.test.isEmpty(this.actualEndTime)) {
					this.$u.toast('请选择实际借调结束时间');
					return
				}else {
					this.showFinish = true;
				}
			},
			//结束借调
			confirmFinish() {
				uni.showLoading({
						title:"提交中...",
						mask:true
					});
				apiOver({
					id: this.detailInfo.id,
					actualStartTime: this.actualStartTime,
					actualEndTime: this.actualEndTime,
					addedCosts: this.addedCosts
				}).then(res => {
					uni.hideLoading();
					if (res.code == 200) {
						this.showFinish = false;
						uni.$u.toast('结束借调成功');
						uni.$emit('refreshCarList')
					}
				})
			},

			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				if (type === 'second') {
					return `${value}秒`
				}
				return value
			},

		}
	}
</script>

<style lang="scss" scoped>
	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $blue15;
		font-size: 26rpx;
		line-height: 60rpx;
		align-self: flex-end;
		margin: 10rpx 20rpx 10rpx;
	}

	.formInfo {
		margin: 20rpx;
		padding: 20rpx 30rpx;
		background: #ffffff;
		border-radius: 18rpx;
		margin-bottom: 120rpx;

	}
</style>
